{$layout}

<!-- 组件 -->
{$var "header"}
<script src="/js/sortable.min.js" type="text/javascript"></script>
{$end}

<!-- 检测配置更新 -->
<proxy-change-notify-box></proxy-change-notify-box>

<div>
    {$template "/proxy/menu"}

    {$template "menu"}

    <form class="ui form" data-tea-action="/proxy/locations/update" data-tea-success="submitSuccess" id="location-form">
        <input type="hidden" name="serverId" :value="server.id"/>
        <input type="hidden" name="locationId" :value="location.id"/>
        <table class="ui table definition selectable">
            <tr>
                <td class="title">匹配路径<em>（Pattern）</em></td>
                <td>
                    <input type="text" name="pattern" v-model="location.pattern" maxlength="1024"/>
                    <p class="comment">路径通常以斜杠(/)开头，比如/hello。如果匹配类型是正则表达式匹配，则可以是一个正则表达式</p>
                </td>
            </tr>
            <tr>
                <td>匹配类型</td>
                <td>
                    <select class="ui dropdown" style="width:10em" name="patternType" v-model="location.type" @change="changePatternType(location.type)">
                        <option v-for="patternType in patternTypes" :value="patternType.type">{{patternType.name}}</option>
                    </select>
                    <p class="comment" v-html="patternDescription"></p>
                </td>
            </tr>
			<tr>
				<td>说明</td>
				<td>
					<input type="text" name="name" maxlength="100" placeholder="说明当前路径规则用途" v-model="location.name"/>
				</td>
			</tr>
            <tr>
                <td colspan="2">
                    <a href="" v-if="!advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">更多选项 <i class="icon down angle"></i> </a>
                    <a href="" v-if="advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">收起选项 <i class="icon up angle"></i> </a>
                </td>
            </tr>
            <tbody v-show="advancedOptionsVisible">
				<tr>
					<td>是否终止往下匹配</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" name="isBreak" value="1" v-model="location.isBreak"/>
							<label></label>
						</div>
						<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的路径规则。</p>
					</td>
				</tr>
				<tr>
					<td>更多匹配条件</td>
					<td>
						<request-cond-box prefix="request" :conds="location.conds" :operators="operators" :variables="variables"></request-cond-box>
						<p class="comment">满足以上条件时路径规则才会生效。参数中可以使用一些内置的变量：<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">点击这里查看</a>，比如${arg.name}表示名为name的参数值</p>
					</td>
				</tr>
				<tr>
					<td>禁止访问条件</td>
					<td>
						<request-cond-box prefix="deny" :conds="location.denyConds" :operators="operators" :variables="variables"></request-cond-box>
						<p class="comment">满足以上任一条件时，用户访问时会返回<span class="ui label tiny">403 Forbidden</span>。参数中可以使用一些内置的变量：<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">点击这里查看</a>，比如${arg.name}表示名为name的参数值</p>
					</td>
				</tr>
				<tr>
					<td>禁止所有访问</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" name="denyAll" value="1" v-model="location.denyAll"/>
							<label></label>
						</div>
						<p class="comment">匹配到当前路径规则的请求立即返回<span class="ui label tiny">403 Forbidden</span>。</p>
					</td>
				</tr>
                <tr>
                    <td class="color-border">文档根目录<em>(Root)</em></td>
                    <td>
                        <auto-complete-path-box name="root" placeholder="类似于 /home/www" :value="location.root" maxlength="500" :autocomplete="dirAutoComplete"></auto-complete-path-box>
                        <p class="comment">可以访问此根目录下的静态资源</p>
                    </td>
                </tr>
				<tr>
					<td class="color-border">URL前缀<em>(StripPrefix)</em></td>
					<td>
						<input type="text" name="urlPrefix" v-model="location.urlPrefix"/>
						<p class="comment">实际访问资源文件时会将此前缀从URL中去掉，通常和匹配路径一致，格式类似于 /hello/world。</p>
					</td>
				</tr>
                <tr>
                    <td class="color-border">首页文件<em>(Index)</em></td>
                    <td>
						<div class="indexes-box">
							<span class="ui label tiny" v-for="(index, arrayIndex) in location.index" :key="arrayIndex">
								{{index}}
								<input type="hidden" name="index" :value="index"/>
								<a href="" @click.prevent="removeLocationIndex(arrayIndex)" title="删除"><i class="icon remove"></i></a>
								<a title="拖动改变顺序" v-if="location.index.length > 1"><i class="icon bars handle"></i></a>
							</span>
						</div>

                        <div class="ui fields inline" v-if="indexAdding" style="margin-top:0.8em">
                            <div class="ui field">
                                <input type="text" name="addingIndexName" style="width:16em" maxlength="100" placeholder="首页文件名，比如 index.php" @keyup.enter="confirmAddIndex()" @keypress.enter.prevent="1" v-model="addingIndexName" />
                            </div>
                            <div class="ui field">
                                <button class="ui button tiny" type="button" @click="confirmAddIndex()">确定</button>
                                &nbsp; <a href="" @click.prevent="cancelIndexAdding()">取消</a>
                            </div>
                        </div>
                        <div class="ui field" style="margin-top: 1em">
                            <button class="ui button tiny" type="button" @click="addIndex()">+</button>
                        </div>
                        <p class="comment">访问路径未指定文件名时，自动查找这些文件</p>
                    </td>
                </tr>
				<tr>
					<td>字符编码<em>(Charset)</em></td>
					<td>
						<select name="charset" class="ui dropdown" v-model="location.charset">
							<option value="">未选择</option>
							<optgroup label="常用"></optgroup>
							<option :value="charset.charset" v-for="charset in usualCharsets">{{charset.charset}} （{{charset.name}}）</option>
							<optgroup label="所有"></optgroup>
							<option :value="charset.charset"  v-for="charset in charsets">{{charset.charset}} （{{charset.name}}）</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>请求Body最大尺寸</td>
					<td>
						<div class="ui fields inline">
							<div class="ui field">
								<input type="text" name="maxBodySize" v-model="maxBodySize" value="0" size="8" maxlength="10"/>
							</div>
							<div class="ui field">
								<select class="ui dropdown" name="maxBodyUnit" v-model="maxBodyUnit">
									<option v-for="unit in maxBodyUnits" :value="unit.code">{{unit.name}}</option>
								</select>
							</div>
						</div>
						<p class="ui comment">0及以下表示不限制</p>
					</td>
				</tr>
			</tbody>
			<tbody v-show="advancedOptionsVisible">
				<tr>
					<td class="color-border">访问日志</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" name="accessLogIsInherited" v-model="accessLogIsInherited" value="1"/>
							<label>继承上一级设置</label>
						</div>
						<p class="comment">取消勾选可以自定义</p>
					</td>
				</tr>
			</tbody>
			<tbody v-show="advancedOptionsVisible && !accessLogIsInherited" v-for="(accessLog, index) in accessLogs">
				<tr>
					<td class="color-border">是否开启访问日志存储</td>
					<td>
						<input type="hidden" name="accessLogIndexes" :value="index"/>
						<input type="hidden" :name="'accessLog' + index + 'Id'" :value="accessLog.id"/>
						<div class="ui checkbox">
							<input type="checkbox" :name="'accessLog' + index + 'On'" v-model="accessLog.on" value="1"/>
							<label></label>
						</div>
						<p class="comment">关闭访问日志，并不影响统计的运行</p>
					</td>
				</tr>
				<tr v-show="accessLog.on">
					<td class="color-border">要存储的访问日志字段</td>
					<td>
						<div class="ui checkbox" v-for="field in accessLog.fields"  style="width:11em;padding:0.4em 0.4em 0.4em 0">
							<input type="checkbox" :name="'accessLog' + index + 'Fields'" :value="field.code" :id="'access-log-' + index + '-field-' + field.code" v-model="field.isChecked"/>
							<label :for="'access-log-' + index + '-field-' + field.code">{{field.name}}</label>
						</div>
					</td>
				</tr>
				<tr v-show="accessLog.on">
					<td class="color-border">要存储的访问日志状态码</td>
					<td>
						<div class="ui checkbox" style="width:5em;padding:0.4em 0.4em 0.4em 0">
							<input type="checkbox" :name="'accessLog' + index + 'Status1'" v-model="accessLog.status1" value="1" :id="'access-log-' + index + '-status1'"/>
							<label :for="'access-log-' + index + '-status1'">1xx</label>
						</div>
						<div class="ui checkbox" style="width:5em;padding:0.4em">
							<input type="checkbox" :name="'accessLog' + index + 'Status2'" v-model="accessLog.status2" value="1" :id="'access-log-' + index + '-status2'"/>
							<label :for="'access-log-' + index + '-status2'">2xx</label>
						</div>
						<div class="ui checkbox" style="width:5em;padding:0.4em">
							<input type="checkbox" :name="'accessLog' + index + 'Status3'" v-model="accessLog.status3" value="1" :id="'access-log-' + index + '-status3'"/>
							<label :for="'access-log-' + index + '-status3'">3xx</label>
						</div>
						<div class="ui checkbox" style="width:5em;padding:0.4em">
							<input type="checkbox" :name="'accessLog' + index + 'Status4'" v-model="accessLog.status4" value="1" :id="'access-log-' + index + '-status4'"/>
							<label :for="'access-log-' + index + '-status4'">4xx</label>
						</div>
						<div class="ui checkbox" style="width:5em;padding:0.4em">
							<input type="checkbox" :name="'accessLog' + index + 'Status5'" v-model="accessLog.status5" value="1" :id="'access-log-' + index + '-status5'"/>
							<label :for="'access-log-' + index + '-status5'">5xx</label>
						</div>
					</td>
				</tr>
				<tr v-if="accessLog.on && accessLog.storagePolicies.length > 0">
					<td class="color-border">选择输出的日志策略</td>
					<td>
						<div class="ui checkbox" v-for="policy in accessLog.storagePolicies" style="width:13em;padding:0.4em 0.4em 0.4em 0">
							<input type="checkbox" :name="'accessLog' + index + 'StoragePolicyIds'" :value="policy.id" :id="'access-log-storage-policy-' + policy.id" v-model="policy.isChecked"/>
							<label :for="'access-log-storage-policy-' + policy.id">{{policy.name}}<em style="font-size:0.8em;color:grey">（{{policy.type}}）</em></label>
						</div>
					</td>
				</tr>
				<tr v-if="accessLog.on && accessLog.storagePolicies.length > 0">
					<td class="color-border">是否只输出到日志策略</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" :name="'accessLog' + index + 'StorageOnly'" v-model="accessLog.storageOnly" value="1"/>
							<label></label>
						</div>
						<p class="comment">选中表示只输出日志到日志策略，而停止默认的日志存储。</p>
					</td>
				</tr>
			</tbody>
			<tbody v-show="advancedOptionsVisible">
				<tr>
					<td>是否开启统计</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" name="enableStat" v-model="location.enableStat"/>
							<label></label>
						</div>
					</td>
				</tr>
				<tr>
					<td class="color-border">Gzip压缩级别</td>
					<td>
						<select name="gzipLevel" v-model="gzip.level" class="ui dropdown" style="width:10em">
							<option value="-1">继承上一级设置</option>
							<option value="0">不压缩</option>
							<option v-for="level in gzipLevels" :value="level">{{level}}</option>
						</select>
						<p class="ui comment">级别越高，压缩比例越大</p>
					</td>
				</tr>
				<tr v-if="gzip.level > 0">
					<td class="color-border">Gzip内容最小长度</td>
					<td>
						<div class="ui fields inline">
							<div class="ui field">
								<input type="text" name="gzipMinLength" v-model="gzipMinLength" size="8" value="0"/>
							</div>
							<div class="ui field">
								<select class="ui dropdown" name="gzipMinUnit" v-model="gzipMinUnit">
									<option v-for="unit in gzipMinUnits" :value="unit.code">{{unit.name}}</option>
								</select>
							</div>
						</div>
						<p class="comment">0表示不限制，内容长度从文件尺寸或Content-Length中获取。</p>
					</td>
				</tr>
				<tr v-if="gzip.level > 0">
					<td class="color-border">Gzip文件MimeType</td>
					<td>
						<single-value-list prefix="gzipMimeType" :values="gzip.mimeTypes" value-name="类型"></single-value-list>
						<p class="comment">默认为text/html, application/json，支持类似于text/*的类型</p>
					</td>
				</tr>
				<tr>
					<td>特殊页面</td>
					<td>
						<server-page-box :pages="location.pages" comment="根据响应状态码返回一些特殊页面，比如404，500等错误页面。" prefix="page"></server-page-box>
					</td>
				</tr>
				<tr>
					<td>临时关闭页面</td>
					<td>
						<server-shutdown-box :shutdown="location.shutdown" prefix="shutdownPage"></server-shutdown-box>
					</td>
				</tr>
				<tr>
					<td>自动跳转到HTTPS</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" name="redirectToHttps" value="1" v-model="location.redirectToHttps"/>
							<label></label>
						</div>
						<p class="comment">开启后，所有HTTP的请求都会自动跳转到对应的HTTPS URL上。</p>
					</td>
				</tr>
                <tr>
                    <td>是否启用</td>
                    <td colspan="3">
                        <div class="ui checkbox">
                            <input type="checkbox" name="on" v-model="location.on"/>
                            <label></label>
                        </div>
                        <p class="comment">选中表示启用此路径规则配置</p>
                    </td>
                </tr>
            </tbody>
            <tr>
                <td colspan="2">
                    <a href="" v-if="!specialSettingsVisible" @click.prevent="showSpecialSettings()" style="font-weight:normal">特殊匹配设置 <i class="icon down angle"></i> </a>
                    <a href="" v-if="specialSettingsVisible" @click.prevent="showSpecialSettings()" style="font-weight:normal">收起特殊匹配设置 <i class="icon up angle"></i> </a>
                </td>
            </tr>
            <tbody v-show="specialSettingsVisible">
                <tr>
                    <td>不区分大小写</td>
                    <td colspan="2">
                        <div class="ui checkbox">
                            <input type="checkbox" name="isCaseInsensitive" v-model="location.isCaseInsensitive"/>
                            <label></label>
                        </div>
                        <p class="comment">选中表示匹配规则中的路径中的英文字母不区分大小写</p>
                    </td>
                </tr>
                <tr>
                    <td class="title">反向匹配</td>
                    <td colspan="2">
                        <div class="ui checkbox">
                            <input type="checkbox" name="isReverse" v-model="location.isReverse"/>
                            <label></label>
                        </div>
                        <p class="comment">选中表示匹配所有<strong>不符合</strong>规则的路径</p>
                    </td>
                </tr>
            </tbody>
			<tbody>
				<tr>
					<td colspan="2">
						<a href="" v-if="!testingVisible" @click.prevent="showTesting()" style="font-weight:normal">匹配测试 <i class="icon down angle"></i> </a>
						<a href="" v-if="testingVisible" @click.prevent="showTesting()" style="font-weight:normal">收起匹配测试 <i class="icon up angle"></i> </a>
					</td>
				</tr>
			</tbody>
			<tbody v-show="testingVisible">
				<tr>
					<td>测试路径</td>
					<td>
						<input type="text" name="testingPath" placeholder="要测试的路径，可以是一个完整的URL"/>
						<p class="comment"><a href="" @click.prevent="testSubmit()">提交测试</a> &nbsp;  <span class="green" v-if="testingFinished && testingSuccess">匹配成功</span>
							<span v-if="testingMapping != null" v-for="(v, k) in testingMapping" class="ui label tiny">${<em>{{k}}</em>}:{{v}}</span>
							<span class="red" v-if="testingFinished && !testingSuccess">匹配失败 {{testingError}}</span></p>
					</td>
				</tr>
			</tbody>
        </table>

        <button class="ui button primary" type="submit">保存</button> &nbsp; <a :href="from">返回</a>
    </form>
</div>